<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第四天 数据驱动视图</title>
</head>
<body>
	<div id="app">

	</div>
	<!--
		路由实现：
				1.传统开发方式url改变后，立刻发起请求响应整个页面，有可能资源过多，
				传统开发会让页面出现白屏
				2.SPA(单页面应用) Single Page Application

				锚点值改变后
				不会立刻发送请求，而是在某个合适的时机，发起ajax请求 页面局部渲染

				优点：页面不立刻跳转 用户体验好
	 -->
	 <!-- 1.先引入vue模块 -->
	 <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	 <!-- 2.后引入vue-router模块 -->
	 <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
	 <script type="text/javascript">
	 	//地址栏上 路由范式

	 	//1. xxx.html#/user/1  				params动态路由参数
	 	//2. xxx.html#/user?userId=1		query方式


	 	//先定义组件
	 	let Login = {
	 		template:`
				<div>
					我是登录组件
					<br/>
					<router-link to="/login/t">t</router-link>
					<router-link to="/login/tt">tt</router-link>
					<router-view/>
				</div>
	 		`
	 	};

	 	let Register = {
	 		template:`
				<div>
					我是注册组件
				</div>
	 		`
	 	};

	 	let UserParams = {
	 		template:`
				<div>
					我是用户UserParams
				</div>
	 		`,
	 		created(){
	 			//抛出来两个对象,挂载到Vue实例化对象
	 			console.log(this.$router);
	 			console.log(this.$route);
	 			console.log(this.$route.params.id);
	 		}
	 	};

	 	let UserQuery = {
	 		template:`
				<div>
					我是用户UserQuery
				</div>
	 		`,
	 		created(){
	 			//抛出来两个对象,挂载到Vue实例化对象
	 			console.log(this.$router);
	 			console.log(this.$route);
	 			console.log(this.$route.query.userId);
	 		}
	 	};

	 	let T = {
	 		template:`
				<div>
					我是T组件
				</div>
	 		`
	 	};

	 	let TT = {
	 		template:`
				<div>
					我是TT组件
				</div>
	 		`
	 	};

	 	//3.让Vue使用该VueRouter 创建
	 	//Vue.use(VueRouter)  脚手架需要写  挂在到全局
	 	//4.创建 router 对象
	 	let router = new VueRouter({
	 		//5.配置路由对象
	 		routes:[
	 			//路由匹配规则
	 			//命名路由 多name属性 :to="{name='login'}"
	 			//注意子路由不需要 斜杠（ / ） 了**************************重点 要不然渲染不出子页面
	 			{
	 				path:'/login',
	 				name:'login',
	 				component:Login,
	 				children:[
	 					{
	 						path:'t',
			 				component:T
	 					},
	 					{
							path:'tt',
			 				component:TT
	 					}
	 				]
	 			},
	 			{
	 				path:'/register',
	 				name:'register',
	 				component:Register
	 			},
	 			//动态路由参数 以冒号（：）开头
	 			{
	 				path:'/user/:id',
	 				name:'userP',
	 				component:UserParams
	 			},
	 			//query ?号拼接写法定义路由
	 			{
	 				path:'/user',
	 				name:'userQ',
	 				component:UserQuery
	 			}
	 		]
	 	});

	 	//引入vue-router模块之后 会提供两个全局画组件 router-link router-view
	 	//router-link 之后会渲染成 a标签  router-link ==> a  to ==> href
	 	//:to="{name:'userP',params:{id:1}}"     :to="{name:'userQ',query:{userId:2,id:3}}"
	 	//router-view ==> 路由匹配组件的出口 此标签在哪就在哪渲染
	 	let App={
	 		template:`  <div>
				 			<router-link to='/login'>登录页面</router-link>
							<router-link to='/register'>注册页面</router-link>
							<router-link :to="{name:'userP',params:{id:1}}">userP</router-link>
							<router-link :to="{name:'userQ',query:{userId:2,id:3}}">userQ</router-link>
							<router-view/>
				 		</div>
	 		`
	 	};


	 	new Vue({
	 		el:'#app',
	 		data(){
	 			return{

	 			}
	 		},
	 		components:{
	 			App
	 		},
	 		//6.挂在路由 交给Vue实例化对象管理
	 		router:router,
	 		template:`<App/>`
	 	})
	 </script>
</body>
</html>
